<template>
  <div>
    <div data-fetch-key="0" class="container">
      <main class="main--">
        <!--轮播图 -->
        <div v-if="bannerData.length != 0" class="home--banner">
          <a-carousel dotPosition="bottom" autoplay :after-change="onChange">
            <div
              class="banner-box"
              v-for="(item, index) in bannerData"
              :key="index"
            >
              <img class="bannerImg" :src="ip + item.pic.substring(7)" alt="" />
              <div class="img-title">
                <h2>{{ item.name }}</h2>
                <p>{{ item.intro }}</p>
              </div>
            </div>
          </a-carousel>
        </div>
        <!-- 轮播图的骨架屏 -->
        <div v-else class="is-loading"></div>
        <div class="home--feature">
          <div class="card" v-for="(item, index) in dataLIst" :key="index">
            <div class="card-body">
              <div class="row no-gutters">
                <div class="col-md-6">
                  <div class="card-text">
                    <h4>{{ item.name }}</h4>
                    <p>
                      {{ item.intro }}
                    </p>
                  </div>
                </div>
                <div class="col-md-6">
                  <img
                    :src="ip + item.pic.substring(7)"
                    alt="Image"
                    class="rounded-0 card-img"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card home--product">
          <div class="card-body">
            <div class="row product--list">
              <div
                v-for="(item, index) in productData"
                :key="index"
                class="col-md-6"
              >
                <article class="card">
                  <img
                    :src="ip + item.pic.substring(7)"
                    :alt="item.name"
                    class="card-img-top"
                  />
                  <div class="card-body">
                    <h4 class="card-title">
                      {{ item.name }}
                    </h4>
                    <a
                      @click="$router.push(`/detail/${item.id}`)"
                      href="javaScript:;"
                      target="_self"
                      class="btn btn-primary"
                      >查看详情</a
                    >
                  </div>
                </article>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { getBanner, getProducts, getHome } from "@/network/api";
import { ip } from "../network/ip";
export default {
  name: "IndexPage",
  layout: "default",
  data() {
    return {
      bannerData: [],
      ip: ip,
      productData: [],
      dataLIst: [],
      searchValue: "",
    };
  },
  methods: {
    onChange() {},
  },
  created() {
    getBanner().then((res) => {
      this.bannerData = res.data.data;
      console.log(this.bannerData);
    });
    // 获取产品数据
    getProducts().then((res) => {
      this.productData = res.data.data.slice(0, 4);
      console.log(this.productData);
    });
    // 获取首页的数据
    getHome().then((Res) => {
      console.log(Res);
      this.dataLIst = Res.data.data;
      console.log(this.dataLIst);
    });
  },
};
</script>
<style scoped lang="scss">
.is-loading {
  /* 宽度和高度根据要展示元素大小设定 */
  width: 100%;
  height: 640px;
  position: relative;
  margin: 0 auto;
  top: 0;
  border-radius: 16px;

  /* 以下代码实现背景动画效果 */
  animation: loading 1.4s ease infinite;
  -webkit-animation: loading 1.4s ease infinite;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(25%, #f0f0f0),
    color-stop(37%, #e3e3e3),
    color-stop(63%, #f0f0f0)
  );
  background-image: -o-linear-gradient(
    left,
    #fffefe 25%,
    #e3e3e3 37%,
    #f0f0f0 63%
  );
  background-image: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e3e3e3 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
}

@-webkit-keyframes loading {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

.bannerImg {
  width: 100%;
  height: 640px;
  border-radius: 20px;
}
.banner-box {
  position: relative;
  color: #fff;
}
.img-title {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 50px;
  text-align: center;
}
.img-title h2 {
  color: #fff;
}
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
</style>
